<template>
  <div id="app">
    <index v-show="!examState" />
    <core v-show="examState" />
    <transition name="fade">
      <pop v-show="popIndex" />
    </transition>
  </div>
</template>

<script>
import index from "./components/index.vue";
import core from "./components/core.vue";
import pop from "./components/popup.vue";
import store from '@/store'

export default {
  name: "app",
  components: {
    core,
    index,
    pop
  },
  computed: {
    examState: () => store.state.examState,
    popIndex: () => store.state.popIndex,
  }
};
</script>

<style lang="stylus">
@import './assets/styles/index.styl'
@import url('./assets/styles/clear.css')
html, body {
  background co2
}
#app {
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
}
</style>
